import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import HomeView from '@/views/HomeView.vue'
import NotFoundComponent from '@/views/NotFoundComponent.vue'
import HeaderView from '@/components/HeaderView.vue'
const routes = [{
  path: '/',
  name: 'HomeView',
  meta:{title:'首页信息'},
  // component: HomeView
  components: {
    default: HomeView,
    HeaderView: HeaderView
  }
}, //{//params传参时使用
// path: '/about/:userId/:name',
//name: 'AboutView',
//alias:'/bbb',
//component: () => import('@/views/AboutView.vue')
//},
{
  // path: '/about/:userId',
  path: '/about',
  name: 'AboutView',
  alias: '/bbb',
  meta:{title:'关于我们'},
  component: () => import('@/views/AboutView.vue'),
  beforeEnter: (to, from, next) => {//路由独享守卫
    // console.log('to',to);
    // console.log('from',from);
     next()
  },
  //  props: true
  //  props:{a: 1}
   props: route => ({ userId: route.query.userId })
},
// {
//   path: '/about',
//   name: 'AboutView',
//   alias:'/bbb',
//   component: () => import('@/views/AboutView.vue')
// },
{
  path: '/user',
  name: 'UserView',
  redirect: '/user/profile',
  component: () => import('@/views/UserView.vue'),
  children: [
    {
      path: 'profile',
      name: 'UserProfile',
      component: () => import('@/views/UserProfile.vue')
    },
    {
      path: 'posts',
      name: 'UserPosts',
      component: () => import('@/views/UserPosts.vue')
    }
  ]
},
{
  path: '/findvuex',
  name: 'FindVuex',
  component: () => import('@/views/FindVuex.vue')
},
{
  path: '/findvuex2',
  name: 'FindVuex2',
  component: () => import('@/views/FindVuex2.vue')
},
{
  path: '/findaim',
  name: 'FindAim',
  component: () => import('@/views/FindAim.vue')
},
{
  path: '/findaim2',
  name: 'FindAim2',
  component: () => import('@/views/FindAim2.vue')
},
{
  path: '/findaim3',
  name: 'FindAim3',
  component: () => import('@/views/FindAim3.vue')
},
{
  path: '/findaim4',
  name: 'FindAim4',
  component: () => import('@/views/FindAim4.vue')
},
{
  path: '/findaim5',
  name: 'FindAim5',
  component: () => import('@/views/FindAim5.vue')
},
{
  path: '/findaim6',
  name: 'FindAim6',
  component: () => import('@/views/FindAim6.vue')
},
{
  path: '/otherview',
  name: 'OtherView',
  component: () => import('@/views/OtherView.vue')
},
{
  path: '/fatherview',
  name: 'FatherView',
  component: () => import('@/views/FatherView.vue')
},
{
  path: '/fathershow',
  name: 'FatherShow',
  component: () => import('@/views/FatherShow.vue')
},
{ path: '*', component: NotFoundComponent }
]
const router = new VueRouter({
  // mode: 'history',
  routes,
  linkExactActiveClass: 'active'
})
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

//全局前置守卫
// router.beforeEach((to,from,next)=>{
//    console.log('to',to);
//    console.log('from',from);
//    next()

// })
//全局解析守卫 只是和全局前置守卫执行时机不一样，没有没有区别
// router.beforeResolve((to,from,next)=>{
//   console.log('to',to);
//   console.log('from',from);
//   next()
// })

// 全局后置钩子
// router.afterEach((to, from) => {
//   console.log('to', to);
//   console.log('from', from);
// })



export default router